// miniprogram/pages/Chart/chart.js
import * as echarts from '../../components/ec-canvas/echarts';

// 调用小程序实例 app.js
const app=getApp();

// const { toASCII } = require("punycode");
// 保存饼图实例
let charInstance=null;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    loading:true,
    
    // 模板的渲染的收入和支出
    mainType:[
      {
        type:'sr',
        title:'收入',
        total:'0.00'
      },
      {
        type:'zc',
        title:'支出',
        total:'0.00'
      }
    ],
    // 点击支出收入的下标
    activeIndex:0,

    // 点击切换年月日
    textArray:['年','月','日'],
    text:'',
    textIndex:0,
    date:'选择日期',


      // 选择用户日期
      userDate:'',

      // 大月  有31号
      largeMonth:['01','03','05','07','08','10','12'],

      // 模板日期控制范围
      start:"",
      end:"",
      
      // 保存记账数据
      bookingDatas:{},

      // 饼图的配置
      ec: {
        onInit: null
      }
  },
  // 初始化canvas实例
  initChart(canvas, width, height, dpr)
  {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);
  
    // chart.setOption(option);
    charInstance=chart;
    return chart;
  },



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 按什么查询 和什么支出收入
      this.setData({
        text:this.data.textArray[this.data.textIndex],
        loading:false,
      })
      // 刚刚开始进入页面的时候就显示当天的时间
      let currentDate=this.getCurrentDate();
      this.setDate(currentDate);
      this.setData({
        userDate:currentDate,
        // 获取app.js里面的start属性
        start:app.globalData.start,
        end:currentDate,
        ec: {
          onInit: this.initChart
        }
      })
      this.getBookingDataByDateRange(currentDate)
  },
// 获取当前日期
  getCurrentDate()
  {
    let currentDate=new Date();
    let year=currentDate.getFullYear();
    let month=currentDate.getMonth()+1;
    month=month>=10?month:'0'+month
    let date=currentDate.getDate();
    date=date>=10?date:'0'+date
    return `${year}-${month}-${date}`
   
  },

  // 点击切换年月日方法
  toggle()
  {
    let length=this.data.textArray.length;
    // 边界计算
    if(this.data.textIndex===length-1)
    {
      this.data.textIndex=0;
    }else{
      this.data.textIndex++;
    }
    this.setData({
      text:this.data.textArray[this.data.textIndex]
    })
    // 修改输入框的年月日
    this.setDate(this.data.userDate);
    this.getBookingDataByDateRange(this.data.userDate)
  },

  // 切换收入支出状态
  toggleMainTypeStatus(e)
  {
    // 获取模板的data-index="{{index}}"的索引值
    let index=e.currentTarget.dataset.index;
    // 如果点击已经选中的
    if(index===this.data.activeIndex)
    {
      return;
    }
    this.setData({
      activeIndex:index
    })
 
    // 主要是为了获取处理数据和颜色   动态渲染饼图   初始化时渲染
    // 绘制饼图的调用
    this.drawPie();
  },

  // 点击日期后--选择日期
  selectDate(e)
  {
    let currentDate=e.detail.value;
    console.log('currentDate==>',currentDate);
    this.setDate(this.data.userDate)
    this.setData({
      userDate:currentDate
    })

  },

  // 随机生成颜色
  createRandomColor()
  {
    let rgb=[];
    for(let i=0;i<3;i++)
    {
      let value=Math.ceil(Math.random()*255) 
      rgb.push(value)
    }
    return `rgb(${rgb.join(',')})`
  },

  // 设置日期渲染到输入框
  setDate(currentDate)
  {
    let date=currentDate.split('-');
    let d=date.slice(0,this.data.textIndex+1);
    // console.log('date==>',date);
    // console.log('d==>',d);
    let dateArray=[];
    d.forEach((v,i)=>{
      dateArray.push(`${v}${this.data.textArray[i]}`)
    })
    console.log('dateArray==>',dateArray);
    this.setData({
      date:dateArray.join('')
    })

    this.getBookingDataByDateRange(currentDate)
  },

  // 根据日期范围查询记账数据
  getBookingDataByDateRange(date)
  {
    console.log('date==>',date);
    // 日期范围
    let start="";
    let end="";

    // 获取当前日期
    let currentDate=this.getCurrentDate().split('-');
    date=date.split("-");

    // 按年查询
    if(this.data.textIndex===0)
    {
      console.log('按年查询');
      start=`${date[0]}-01-01`;
      // 如果是同年
      if(currentDate[0]===date[0])
      {
       end=currentDate.join("-")
      // 不同年
      }else{
        end=`${date[0]}-12-31`
      }
    }else if(this.data.textIndex===1)
    {
      console.log('按月查询');
      start=`${date[0]}-${date[1]}-01`
      // 如果是同年
      if(currentDate[0]===date[0])
      {
        // 如果是同月
        if(currentDate[1]===date[1])
        {
           end=date.join("-")
        }else{
          // 如果不同月
          //如果是2月份
          if(date[1]==='02')
          {
            // 如果是闰年
            // 普通闰年：能被4整除但不能被100整除的年份为普通闰年。
            // 世纪闰年：能被400整除的为世纪闰年。
            if(date[0]%400===0||(date[0]%4===0)&&date[0]%100!==0)
            {
              end=`${date[0]}-02-29`
            }else{
              // 不是闰年
              end=`${date[0]}-02-28`
            }
          }else{
            // 如果不是二月份
            // 如果是大月  到31号
            if(this.data.largeMonth.indexOf(date[1])>-1)
            {
                end=`${date[0]}-${date[1]}-31`
            }else{
                end=`${date[0]}-${date[1]}-30`
            }
          }
          
        }
      }else{
        // 如果不同年
        // 如果不同月
          //如果是2月份
          if(date[1]==='02')
          {
            // 如果是闰年
            // 普通闰年：能被4整除但不能被100整除的年份为普通闰年。
            // 世纪闰年：能被400整除的为世纪闰年。
            if(date[0]%400===0||(date[0]%4===0)&&date[0]%100!==0)
            {
              end=`${date[0]}-02-29`
            }else{
              // 不是闰年
              end=`${date[0]}-02-28`
            }
          }else{
            // 如果不是二月份
            // 如果是大月  到31号
            if(this.data.largeMonth.indexOf(date[1])>-1)
            {
                end=`${date[0]}-${date[1]}-31`
            }else{
                end=`${date[0]}-${date[1]}-30`
            }
          }
      }
    
    }else{
      console.log('按日查询');
      start=date.join("-")
    }
    console.log('start==>',start);
    console.log('end==>',end);

    wx.showLoading({
      title: '加载中...',
      mask: true
    })

    let data={
      start
    }
    if(end)
    {
      data.end=end;
    }
    //调用云端的云函数
    wx.cloud.callFunction({
      //云端的云函数名称
      name: 'get_booking_bydateRange',
      data,
    }).then(res => {
      //关闭加载提示
      wx.hideLoading();
      console.log('getBookingDataByDateRange res==>',res);
    
      // 用于判断类型 然后添加数据
      let mainType=['sr','zc'];
      // 用于存储所有数据项
      let datas={};
        // 查找指定的类型数据 (主要是把数据分成收入支出两大类)
      mainType.forEach((v,i)=>{
        let data={
          type:v,
          total:0,
          subTypes:[]
        };
        // 类型一样的话  把数据项添加到data的subTypes里面（区分收入的支出）
        res.result.data.forEach(item=>{
             // 一个收入的  一个是支出的
          if(v===item.mainType.type)
          {
            data.subTypes.push(item)
            data.total+=Number(item.money)
          }
        })
        datas[v]=data;
        // 设置当前点击的总数 
        this.data.mainType[i].total=data.total.toFixed(2)
      })
   
      // 遍历数据 按照收入支出子类型(餐饮、交通、人情...)
      for(let key in datas)
      {
        let v=datas[key]
            // 获取每一项数据
            let subTypes=v.subTypes;
            // 储存数据类型  cnayin  renqing  gouwu
            let sType=[]
            subTypes.forEach(item=>{
              // 把获取到数据类型查重  
              if(sType.indexOf(item.subType.type)===-1)
              {
                sType.push(item.subType.type )
              }
            })
            console.log('subTypes==>',subTypes);
            // 分类子类型  通过获取到的类型canyin等来查找  并计算每个类型的总数值 ，用于渲染图表
            let sTypeDatas=[];
            sType.forEach(value=>{
              let sty={
                // 总金额
                total:0,
                // 总笔数
                count:0,
                // 当前子类型
                type:value,
                // 子类型数据
                data:[],
                // 名字
                title:'',
                // 图片
                picurl:'',
                // 随机颜色
                color:'',
                // 添加设置样式的类名（sr-zc)
                classType:key,
                // 饼图data数据name字段
                name:'',
                // 饼图data数据value
                value:0,

                // 记账id
                _ids:[],
              };
              subTypes.forEach(val=>{
                // 判断类型 canyin
                if(value===val.subType.type)
                {
                  // 累加金额 和笔数
                  sty.total+=Number(val.money);
                  sty.count++;
                  sty.data.push(val)
                  sty._ids.push(val._id)
                  sty.value+=Number(val.money)
                  // 判断名字  去重名字
                  if(!sty.title)
                  {
                    sty.title=val.subType.title
                  }
                   // 判断图片有无  去重图片
                   if(!sty.picurl)
                   {
                     sty.picurl=val.subType.picurl;
                   }
                  //  判断颜色有无
                  if(!sty.color)
                  {
                    sty.color=this.createRandomColor()
                  }
                  // 饼图名字
                  if(!sty.name)
                  {
                    sty.name=val.subType.title
                  }
                }
              })
              // 类型总和
              sty.total=sty.total.toFixed(2)
              // 百分比
              sty.name+=' '+(sty.value/v.total*100).toFixed(1)+'%';
              sty._ids=sty._ids.join('-')
              sTypeDatas.push(sty)
            })
            console.log('sType==>',sType);
            console.log('sTypeDatas==>',sTypeDatas);
    
            // 把处理后的数据赋值给subTypes
            v.subTypes=sTypeDatas
            console.log('datas里面储存的数据项==>',datas);
            console.log('createRandomColor==>',this.createRandomColor());
      }
      
      // datas.forEach(v=>{
    
      //  })
     this.data.bookingDatas=datas;

    
      this.setData({
        //  设置收入和支出的总金额
        mainType:this.data.mainType,
         //  获取收入或者支出类型数据
         bookingDatas:datas
      })
      console.log('this.data.bookingDatas==>',this.data.bookingDatas)

     
      
      // 主要是为了获取处理数据和颜色   动态渲染饼图   初始化时渲染
      // 绘制饼图
      this.drawPie();
    

    }).catch(err => {
      console.log('err==>',err);
    })

  },

  // 绘制斌图数据
  drawPie()
  {
     // 获取随机颜色  然后渲染饼图颜色
    let colors=[];
      // 主要是为了获取处理数据和颜色   动态渲染饼图   初始化时渲染
    let subTypesData=this.data.bookingDatas[this.data.mainType[this.data.activeIndex].type].subTypes;
    subTypesData.forEach(v=>{
      colors.push(v.color)
    })
    //  把数据添加并渲染
    var option = {
      backgroundColor: "#ffffff",
      color:colors,
      legend:{top:'bottom'},
      series: [{
        label: {
          normal: {
            fontSize: 14
          }
        },
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['0', '60%'],
        data:subTypesData,
      }]
    };
        charInstance.setOption(option);
  },

  // 查看记账详情
  viewBookingDetail(e)
  {
    
    let _ids=e.currentTarget.dataset._ids;
    // console.log('_ids==>',_ids);
    
    //在js里面实现页面跳转
    wx.navigateTo({
      url: `../bookingDetail/bookingDetail?_ids=${_ids}`
    })
  }
  
  
 
})